<template>
  <van-nav-bar
    title="欢迎登录"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('/register');
      }
    "
  />

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="reactivesFrom.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />

      <van-field
        v-model="reactivesFrom.password"
        :type="showpassword ? 'text' : 'password'"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #button>
          <van-icon style="font-size: 20px" name="eye-o" @click="showpassword = !showpassword" />
        </template>

      </van-field>
    </van-cell-group>

    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="submits"
      >
        登录
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { reactive, ref } from "vue";
const reactivesFrom = reactive({
  username: "",
  password: "",
});
import { loginApi } from "@/api/api";

import { useRouter } from "vue-router";
let router = new useRouter();

import { showToast } from "vant";

const submits = () => {
  loginApi(reactivesFrom.username, reactivesFrom.password).then((res) => {
    console.log(res);
    if (res.data.code == 0) {
      showToast({
        type: "success",
        message: "登录成功",
        duration: 2000,
        onClose() {
          router.push("/");
        },
      });
      localStorage.setItem("token", res.data.data.token);
      localStorage.setItem("username", reactivesFrom.username);
    } else {
      showToast({
        type: "fail",
        message: "登录失败",
        duration: 2000,
      });
      (reactivesFrom.username = ""), (reactivesFrom.password = "");
    }
  });
};
let showpassword = ref(true);
</script>

<style lang="scss" scoped>
</style>